<template>
  <div>
    <div class="express-search-box">
      <div class="express-search-border">
        <input class="weui-input" ref="searchInput" type="text" placeholder="请输入物流公司关键字" v-model="keyword" @keyup="searchEnter($event)" @blur="searchEnter({keyCode:13})"/>
        <i class="icon icon-search"></i>
      </div>
    </div>

    <div class="express-main">

      <div class="express-list-box">
        <div class="express-list" v-for="(v,k) in even(expressList)" :key="k">
          <div class="szm">{{v.showSzm?v.szm:''}}</div>
          <router-link v-if="isBuyer" :to="{name:'returnGoods',query:{expressId:v.id,expressName:v.name,orderId:orderId}}" replace class="express-list-item">
            <p>{{v.name}}</p>
            <p>0061-388479045</p>
          </router-link>
          <router-link v-else :to="{name:'deliverGoods',query:{expressId:v.id,expressName:v.name,orderId:orderId}}" replace class="express-list-item">
            <p>{{v.name}}</p>
            <p>0061-388479045</p>
          </router-link>
        </div>

      </div>

      <ul class="initial">
        <li v-for="(v,k) in arr" :key="k">{{v}}</li>
      </ul>
    </div>


  </div>
</template>

<script>
  import {express} from '../../../../assets/js/getData';
  export default {
    name: "express",
    data(){
      return {
        arr:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
        expressList:[],
        expressName:null,
        szm:null,
        pageNum:1,
        pageSize:null,
        orderId:null,
        keyword:'',
        isBuyer:null,
      }
    },
    created(){
      this.orderId = this.$route.query.orderId;
      this.isBuyer = this.$route.query.isBuyer;
      this.getExpress();
    },
    methods:{
      even(expressList) {
        for (let i=0;i<expressList.length;i++){
          if(i==0){
            expressList[i].showSzm = true;
          }else {
            if(expressList[i].szm==expressList[i-1].szm){
              expressList[i].showSzm = false;
            }else {
              expressList[i].showSzm = true;
            }
          }
        }
        console.log(expressList);
        return expressList;
      },
      //搜索物流
      searchEnter(e){
        if(e.keyCode == 13&&this.keyword){
          if(/^[a-zA-Z]*$/.test(this.keyword)) {
            this.szm = this.keyword;
            this.getExpress();
          } else if(/^[\u4e00-\u9fa5]*$/.test(this.keyword)) {
            this.expressName = this.keyword;
            this.getExpress();
          }
          this.$refs.searchInput.blur();
        }
      },
      //获取物流列表
      async getExpress(){
        let params ={
          name:this.expressName,
          szm:this.szm,
          pageNum:this.pageNum,
          pageSize:this.pageSize
        };
        let res = await express(params);
        if(res.data.reqResult.code>0){
          this.expressList = res.data.data;
        }else {
          Toast(res.data.reqResult.msg);
        }
      },


    }
  }
</script>

<style scoped>
  .express-search-box{
    padding: 0rem 2.4rem;
    display: flex;
    align-items: center;
    height: 2.9rem;
  }
  .express-search-border{
    width: 100%;
    height: 1.5rem;
    line-height: 1.5rem;
    border: 1px solid #BFBFBF;
    border-radius: 2px;
    padding-left: 2rem;
    position: relative;
  }
  .icon-search{
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    color: #BFBFBF;
  }
  /*表单placeholder样式*/
  input::-webkit-input-placeholder{
    color: #999999;
    font-size: 0.7rem;
  }
  input:-moz-placeholder{
    color: #999999;
    font-size: 0.7rem;
  }
  input::-moz-placeholder{
    color: #999999;
    font-size: 0.7rem;
  }
  input:-ms-input-placeholder{
    color: #999999;
    font-size: 0.7rem;
  }
  .express-main{
    display: flex;
    justify-content: space-between;
    padding-left: 0.7rem;
    padding-right: 0.85rem;
    padding-top: 0.75rem;
    height: calc(100vh - 2.9rem);
    box-sizing: border-box;
  }
  .express-list-box{
    flex-grow: 1;
    height: 100%;
    overflow: auto;
  }
  .express-list{
    display: flex;
    align-items: center;
  }
  .szm{
    color: #C50000;
    font-size: 0.7rem;
    margin-right: 0.45rem;
    width: 0.5rem;
  }
  .express-list-item{
    flex-grow: 1;
    border-top: 1px solid #EEEEEE;
    padding: 0.35rem 0;
  }
  .express-list .express-list-item:last-child{
    border-bottom: 1px solid #EEEEEE;
  }
  .express-list-item p:first-child{
    color: #333333;
    font-size: 0.7rem;
    line-height: 1.15rem;
  }
  .express-list-item p:last-child{
    color: #666666;
    font-size: 0.65rem;
    line-height: 0.95rem;
  }
  .initial{
    width: 0.6rem;
    height: 25.45rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-left: 0.25rem;
  }
  .initial li{
    color: #666666;
    font-size: 0.6rem;
  }
</style>
